<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        ul,li{
            list-style: none;
        }
        body{
            display: flex;

        }
        .rig{
            flex: 1;
        }
        .lef{
            width: 248px;
            height: 100%;
            background-color: #304156;
            color: #bfcbd9;
        }
        .lef>ul{
            height: 35px;
            display: flex;
            justify-content: space-between;
            line-height: 35px;
        }
        .lef>ul>div>.iconfont{
            margin: 0 10px;
        }
        .lef>ul>.iconfont{
            margin: 0 10px;
        }
        .lef>ul:nth-child(3){
            color: white;
        }
        .lef>ul:nth-child(4){
            color: white;
            display: block;
            height: auto;
        }
        .lef>ul:nth-child(4)>li{
            color: #bfcbd9;
            display: flex;
            background-color: #1f2d3d;
            height: 45px;
            line-height: 45px;
            justify-content: space-between;
        }
        .lef>ul:nth-child(4)>li:nth-child(5){
          color: #3370b1;
        }
        .lef>ul:nth-child(4)>li>div>.iconfont{
           margin: 0 10px  0 30px;
        }
        .rig>section:nth-child(1){
            display: flex;
            justify-content: space-between;
            color: black;
            padding: 10px;
        }
        .rig>section:nth-child(1)>div>img{
          width: 30px;
        }
        .rig>section:nth-child(2){
            border-top: 1px solid;
          display: flex;
          padding-left: 10px;
          border-bottom: 1px solid;
          
          box-shadow: 0px 10px 10px gray;
        }
        .rig>section:nth-child(2)>div:first-child{
          border: 1px solid ;
          padding: 5px;
          margin-right: 10px;
        }
        .rig>section:nth-child(2)>div:last-child{
          /* border: 1px solid ; */
          padding: 6px;
          background-color: #1890ff;
          color: white;
        }
        .rig>section:nth-child(3){
            padding: 10px;
        display: flex;
        align-items: center;

        }
        .rig>section:nth-child(3)>input{
  
        text-indent: 10px;
        height: 30px;
            
        }
        .rig>section:nth-child(3)>button{
            text-indent: 0;
            width: 50px;
       margin: 0 10px;
        height: 30px;
            background-color: white;
        }
        .rig>section:nth-child(3)>.sou{
          background-color: #1890ff;

        }
        .rig>section:nth-child(4){
         padding: 10px;
         display: flex;
justify-content: space-between;
        }
        .rig>section:nth-child(4) button{
            width: 50px;
            height: 30px;
        }
        table{
            width: 100%;
            margin: 10px;
            text-align: center;
        }
        table>thead{
            background-color: #f8f8f9;
            height: 40px;
        }
        table>tbody>tr{
            height: 40px;
        }
        table>tbody>tr>td{
            border-top: 1px solid gray;
        }
        table>tbody>tr>td:nth-child(6)>span{
            background-color: #e8f4ff;
            border: 1px solid #1890ff;
            color: #1890ff;
        }
        table>tbody>tr>td:nth-child(8)>span{
         
            color: #1890ff;
        }
        .bottom{
            display: flex;
            justify-content: center;
        }
        .bottom>div{
            width: 20px;
            height: 20px;
            background-color: #1890ff;
            text-align: center;
            margin: 0 3px;
        }
        .bottom>button{
            width: 20px;
            height: 20px;
        }
        main{
            visibility: hidden;
           
        position: fixed;
        left: 50%;
        top:50%;
        margin-top: -150px;
        margin-left: -150px;
        width: 300px;
        height: 300px;
        background-color: white;
        border: 1px solid;
        padding: 20px;
        }
        main>div{
            display: flex;
            margin: 20px 0;
        }
        main>div>input{
            height: 30px;
            width: 200px;
        }
        main>div:last-child{
            justify-content: center;
        }
        main>div:last-child>button{
            width: 50px;
            height: 30px;
        }
        main>div:last-child>button:first-child{
            width: 50px;
            height: 30px;
            background-color: #1890ff;
        }
        main>div:first-child{
            justify-content: space-between;
        }
        header{
            position: absolute;
            visibility: hidden;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
        }
    </style>
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <div class="lef">
        <h2>管理系统</h2>
        <ul>
            <div><span class="iconfont icon-home"></span>
                首页</div>
        </ul>
        <ul>
            <div>
                <span class="iconfont icon-home"></span>
            系统管理
            </div>
            <span class="iconfont icon-tianjia"></span>
        </ul>
        <ul>
            <li>
                <div>
                <span class="iconfont icon-yonghu"></span>
                用户管理
                </div>
               </li>
            <li>
                <div>
                <span class="iconfont icon-yonghu"></span>
                用户管理
                </div>
               </li>
            <li>
                <div>
                <span class="iconfont icon-yonghu"></span>
                用户管理
                </div>
               </li>
            <li>
                <div>
                <span class="iconfont icon-yonghu"></span>
                用户管理
                </div>
               </li>
            <li>
                <div>
                <span class="iconfont icon-yonghu"></span>
                岗位管理
                </div>
               </li>
            <li>
                <div>
                <span class="iconfont icon-yonghu"></span>
                用户管理
                </div>
               </li>
            <li>
                <div>
                <span class="iconfont icon-yonghu"></span>
                用户管理
                </div>
               </li>
            <li>
                <div>
                <span class="iconfont icon-yonghu"></span>
                用户管理
                </div>
               </li>
            <li>
                <div>
                <span class="iconfont icon-yonghu"></span>
                用户管理
                </div>
               </li>
            <li>
                <div>
                <span class="iconfont icon-yonghu"></span>
                用户管理
                </div>
               </li>
        </ul>
        <ul>
            <div>
                <span class="iconfont icon-home"></span>
            系统管理
            </div>
            <span class="iconfont icon-tianjia"></span>
        </ul>
    </div>
    <div class="rig">
        <section>
            <span class="iconfont icon-xitongrizhi"></span>
            <div>
                <span class="name">测试名字</span>
                <img src="./img/login-background.jpg" alt="">

            </div>
        </section>
        <section>
            <div>首页</div>
            <div>岗位管理</div>
        </section>
        <section>
            <h3>岗位名称</h3>
            <input class="gjc" type="text" name="" id="" placeholder="请输入岗位名称">
            <button class="sou">搜索</button>
            <button>重置</button>
        </section>
        <section>
           <div>
            <button class="add">新增</button>
            <button>修改</button>
            <button>删除</button>
            <button>导出</button>
           </div>
           <div></div>
        </section>
        <table >
            <thead>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>岗位编号</td>
                    <td>岗位编码</td>
                    <td>岗位名称</td>
                    <td>岗位服务</td>
                    <td>状态</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1</td>
                    <td>user</td>
                    <td>董事长</td>
                    <td>1</td>
                    <td><span>正常</span></td>
                    <td>2022-11-25 15:20</td>
                    <td>
                      <span>  <span class="iconfont icon-bianji"></span>修改</span>
                      <span>  <span class="iconfont icon-shanchu"></span>删除</span>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1</td>
                    <td>user</td>
                    <td>董事长</td>
                    <td>1</td>
                    <td><span>正常</span></td>
                    <td>2022-11-25 15:20</td>
                    <td>
                      <span>  <span class="iconfont icon-bianji"></span>修改</span>
                      <span>  <span class="iconfont icon-shanchu"></span>删除</span>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1</td>
                    <td>user</td>
                    <td>董事长</td>
                    <td>1</td>
                    <td><span>正常</span></td>
                    <td>2022-11-25 15:20</td>
                    <td>
                      <span>  <span class="iconfont icon-bianji"></span>修改</span>
                      <span>  <span class="iconfont icon-shanchu"></span>删除</span>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1</td>
                    <td>user</td>
                    <td>董事长</td>
                    <td>1</td>
                    <td><span>正常</span></td>
                    <td>2022-11-25 15:20</td>
                    <td>
                      <span>  <span class="iconfont icon-bianji"></span>修改</span>
                      <span>  <span class="iconfont icon-shanchu"></span>删除</span>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="bottom">
            <span>共4页</span>
            <button class="shang"><</button>
            <div>1</div>
            <button class="xia">></button>
        </div>
    </div>

    <header></header>
    <main>
       <div>
        <h2>添加岗位</h2> X
       </div>
       <div>
        <h3>岗位名称</h3><input type="text" placeholder="请输入岗位名称">
       </div>
       <div>
        <h3>岗位编码</h3><input type="text" placeholder="请输入岗位编码">
       </div>
     
       <div>
        <button>确定</button>
        <button>取消</button>
       </div>
    </main>
</body>
</html>
<script src="./axios.min.js"></script>
<script>
    var main=document.querySelector('main')
    var add=document.querySelector('.add')
    var gjc=document.querySelector('.gjc')
    var sou=document.querySelector('.sou')
    var ye=document.querySelector('.bottom>span')
    var shang=document.querySelector('.bottom .shang')
    var xia=document.querySelector('.bottom .xia')
    var current=1
    var total
var tbody=document.querySelector('tbody')
    function render(shuzu){
        if(current==1){shang.disabled=true}else{shang.disabled=false}
        if(current==total){xia.disabled=true}else{xia.disabled=false}
        var str=shuzu.map((item)=>{
            return `
            <tr>
                    <td><input type="checkbox"></td>
                    <td>${item.bianhao}</td>
                    <td>${item.bianma}</td>
                    <td>${item.mingcheng}</td>
                    <td>${item.fuwu}</td>
                    <td><span style="background-color:${item.bianhao ? '' : 'red'};">${item.zhuangtai ? '正常' : '异常'}</span></td>
                    <td>${item.shijian}</td>
                    <td>
                      <span>  <span class="iconfont icon-bianji"></span>修改</span>
                      <span style="cusor:pointer;" class="shanchu" data-bianhao=${item.bianhao}>  <span class="iconfont icon-shanchu"></span>删除</span>
                    </td>
                </tr>
            `
        }).join("")
        tbody.innerHTML=str ? str: '<h1>无内容</h1>'
    }

    var yonghu=localStorage.getItem('yonghu')
    if(yonghu){
        document.querySelector('.name').innerHTML=`${JSON.parse(yonghu).name}`
    }
    axios.get('/user/xuan',{params:{current}}).then((res)=>{
       console.log( res.data.list)
       render( res.data.list)
       total=Math.ceil(res.data.total/4)
       ye.innerHTML=`共${total}页`
    })
    // 上一页
    shang.onclick=function(){
        current--
        axios.get('/user/xuan',{params:{current}}).then((res)=>{
       console.log( res.data.list)
       render( res.data.list)
       ye.innerHTML=`共${Math.ceil(res.data.total/4)}页`
       document.querySelector('.bottom div').innerHTML=current

    })
    }
    // 下一页
    xia.onclick=function(){
        current++
        axios.get('/user/xuan',{params:{current}}).then((res)=>{
       console.log( res.data.list)
       render( res.data.list)
       ye.innerHTML=`共${Math.ceil(res.data.total/4)}页`
       document.querySelector('.bottom div').innerHTML=current
    })
    }
    // 模糊查询
    sou.onclick=function(){
        axios.get('/user/cha',{params:{gjc:gjc.value}}).then((res)=>{
            
            
            render( res.data.list)
     
    })
    }
    // 删除
    tbody.onclick=function(e){
        if(e.target.className=='shanchu'){
          
            axios.post('/user/shan',{bianhao:e.target.dataset.bianhao,current}).then((res)=>{
                
                
                render(res.data.list)
         
      })
        }
    }
    add.onclick=function(){
        console.log('aaa')
        main.style.visibility='visible'
    }
</script>